<template>
	<div class="inner-container">
		<ul class="operateList">
			<li class="operateBtn" @click="Show(true,0)"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">新增</span></li>
			<li class="operateBtn" @click="Show(true,1)"><img src="../../../assets/img/eidt.png" height="20" width="20" /><span class="operateTitle">编辑</span></li>
			<li class="operateBtn bigWidth" @click="ResetPassword()"><img src="../../../assets/img/add.png" height="20" width="20" /><span class="operateTitle">重置密码</span></li>
			<li class="operateBtn" @click="DeleteData()"><img src="../../../assets/img/delete.png" height="20" width="20" /><span class="operateTitle">删除</span></li>
			<li class="operateBtn bigWidth" @click="ShowRoleForm(true)"><img src="../../../assets/img/flowname.png" height="20" width="20" /><span class="operateTitle">配置角色</span></li>
			<li class="operateBtn bigWidth" @click="ShowOrgForm(true)"><img src="../../../assets/img/flowname.png" height="20" width="20" /><span class="operateTitle">配置部门</span></li>
		</ul>
		<queryFrom @Refresh="Refresh"></queryFrom>
		<div style="padding:10px 10px 0px 10px">
			<el-table :data="tableData" highlight-current-row :height="tableHeight" class="table" @current-change="handleCurrentChange" style="width: 100%">
				<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="name" label="用户账号" min-width="16%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="staffName" label="人员名称" min-width="16%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="sex" label="性别" min-width="16%" show-overflow-tooltip>
					<template scope="row">{{row.row.sex=="1"?'男':'女'}}</template>
				</el-table-column>
				<el-table-column property="age" label="年龄" min-width="16%">
				</el-table-column>
				<el-table-column property="phone" label="电话" min-width="16%" show-overflow-tooltip>
				</el-table-column>
				<el-table-column property="email" label="邮箱" min-width="16%">
				</el-table-column>
				<!--<el-table-column property="roleNames" label="角色" min-width="40%" show-overflow-tooltip>
            </el-table-column>
            <el-table-column property="orgNames" label="部门" min-width="16%" show-overflow-tooltip>
            </el-table-column>-->
			</el-table>
		</div>
		<el-dialog title="人员" @close="FormClose" v-if="dialogTableVisible" v-model="dialogTableVisible" size="600px">
			<from @Show="Show" :editData="editData" ref="form" @Refresh="Refresh"></from>
		</el-dialog>
		<el-dialog title="配置角色" @close="SelectRoleFormClose" top="15%" v-model="SelectRoleFormVisible" size="600px">
			<SelectRoleForm @Show="ShowRoleForm" :staff="selectedRow" ref="selectRoleForm" @Refresh="Refresh"></SelectRoleForm>
		</el-dialog>
		<el-dialog title="配置部门" @close="SelectOrgFormClose" top="15%" v-if="SelectOrgFormVisible" v-model="SelectOrgFormVisible" size="800px">
			<SelectOrgForm @Show="ShowOrgForm" :staff="selectedRow" ref="selectOrgForm" @Refresh="Refresh"></SelectOrgForm>
		</el-dialog>
		<pageBox :totalNum="totalNum" @Refresh='Refresh'></pageBox>
	</div>
</template>
<script>
	import from from './form/Form.vue'
	import queryFrom from './form/QueryForm.vue'
	import pageBox from '../../Common/Page1.vue'
	import SelectRoleForm from './form/SelectRoleForm.vue'
	import SelectOrgForm from './form/SelectOrgForm.vue'
	export default {
		components: {
			from: from,
			queryFrom: queryFrom,
			pageBox: pageBox,
			SelectRoleForm,
			SelectOrgForm
		},
		data() {
			return {
				tableData: null,
				selectedRow: null,
				dialogTableVisible: false,
				SelectRoleFormVisible: false,
				SelectOrgFormVisible: false,
				tableHeight: 600,
				pageInfo: {
					page: 1,
					pageSize: 13
				},
				queryInfo: {},
				totalNum: 0,
				editData: null
			}
		},
		mounted() {
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				
				//得到初始高度
//				let contentHeight = $('.content').height(),
//					wrapListHeight = $('.operateList').height(),
//					warpBoxHigeht = $('.list').height();
//				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - 180;
//				//计算显示高度
//				var timer = null;
//				$(window).resize(() => {
//					clearTimeout(timer)
//					timer = setTimeout(() => {
//						let contentHeight = $('.content').height(),
//							wrapListHeight = $('.operateList').height(),
//							warpBoxHigeht = $('.list').height();
//						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - 180
//
//					}, 200)
//				})
		} else {
				this.tableHeight = "";
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.selectedRow = val;
			},
			Show(showType, btnType) {
				if(btnType == 1) {
					if(this.selectedRow == null) {
						this.$message.error("请选择数据");
						return;
					}
					this.SetFormData();
				} else if(btnType == 0) {
					this.editData = null
				}
				this.dialogTableVisible = showType;
			},
			Refresh(data) {
				this.queryInfo.current = this.pageInfo.page;
				this.queryInfo.size = this.pageInfo.pageSize;
				this.queryInfo.type = 0;
				data = data || {}

				this.ajax({
					url: 'tSysUser/page',
					data: $.extend({}, this.queryInfo, data), //this.queryInfo,
					success: function(data) {
						this.tableData = data.records;
						if(data.total != this.totalNum) {
							this.totalNum = data.total;
						}
					}
				})
			},
			SetFormData() {
				this.ajax({
					url: '/tSysUser/selectUserById?id=' + this.selectedRow.id,
					success: function(data) {
						this.editData = data;
					}
				})
			},
			DeleteData() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				} else {
					this.$confirm('是否删除数据？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.ajax({
							url: 'tSysUser/deleteUser',
							type: 'post',
							data: {
								id: this.selectedRow.id
							},
							success: function(data) {
								this.Refresh();
							}
						});
					}).catch(() => {

					});

				}

			},
			ResetPassword() {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				} else {
					this.$confirm('是否重置密码为123456？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.ajax({
							url: 'tSysUser/resetPassword',
							type: 'post',
							data: {
								id: this.selectedRow.id,
								password: '123456'
							},
							success: function(data) {
								this.Refresh();
							}
						})
					}).catch(() => {

					});
				}
			},
			ShowRoleForm(showType) {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				}
				this.SelectRoleFormVisible = showType;
				if(this.$refs.selectRoleForm != undefined && showType) {
					this.$refs.selectRoleForm.Refresh(null, 1);
				}
			},
			ShowOrgForm(showType) {
				if(this.selectedRow == null) {
					this.$message.error("请选择数据");
					return;
				}
				this.SelectOrgFormVisible = showType;
				if(this.$refs.selectOrgForm != undefined && showType) {
					this.$refs.selectOrgForm.Refresh();
				}
			},
			FormClose() {
				this.$refs.form.ClearData();
			},
			SelectRoleFormClose() {
				this.$refs.selectRoleForm.ClearData(2);
			},
			SelectOrgFormClose() {
				this.$refs.selectOrgForm.ClearData(2);
			}
		},
		watch: {},
		created() {
			this.Refresh();
		}

	}
</script>
<style scoped>
	.operateList {
		width: 100%;
		height: 35px;
		border-bottom: 1px solid #eae9e9;
		font-size: 0;
	}
	
	.operateBtn {
		font-size: 14px;
		display: inline-block;
		vertical-align: top;
		height: 20px;
		line-height: 20px;
		border-right: 1px solid #ddd;
		padding: 0 10px;
		margin: 5px 0;
		text-align: center;
		cursor: pointer;
		color: #666;
	}
	
	.operateBtn:last-child {
		border-right: none;
	}
	
	.operateTitle {
		vertical-align: top;
		padding-left: 4px
	}
</style>